<template>
  <div
    class="app-empty"
    :style="{'height: auto;': !!isEmpty }"
  >
    <div
      class="app-empty-center"
      :style="{'text-align: center;': !!isEmpty}"
    >
      <slot v-if="!isEmpty" name="empty_body"/>
      <slot
        v-if="isEmpty && !isLoading"
        name="empty_content"
      >
            <!-- :style="`width:${pictureWidth};`" -->
        <div class="app-empty__img">
          <image
            :src="src"
            mode="widthFix"
          />
        </div>
        <div
          class="app-empty__title"
        >
          <template v-if="isTitle">
            <span :class="[type==='noData'?'empty_noData':'']">{{ title }}</span>
            <span>{{ content }}</span>
          </template>
          <slot
            v-else
            name="empty_title">
          </slot>
        </div>
      </slot>
      <slot  v-else>
          <div>
            <div class='foot-layout' v-if="finished">
                  <!-- <div class='foot-divider'></div> -->
                  <div class='foot-text'>{{finishedText}}</div>
                  <!-- <div class='foot-divider'></div> -->
              </div>
              <div class='foot-layout' v-if="isLoading">
                <div class='foot-text'>
                    <div class="loading"></div>加载中
                </div>
              </div>
          </div>
      </slot>
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
	name: 'AppWrapperEmpty',
	props: {
		/**
     * type()
     * search (搜索)
     * noData (无数据)
     */
		type: {
			type: String,
			default: 'search'
		},

		// 图片宽度
		pictureWidth: {
			type: String,
			default: '250rpx'
		},

		pictureHeight: {
			type: String,
			default: ''
		},

		title: {
			type: String,
			default: '暂无数据内容'
		},

		// 是否垂直居中
		content: {
			type: String,
			default: ''
		},

		isEmpty: {
			type: Boolean,
			default: false
		},
		isLoading: {
			type: Boolean,
			default: false
		},
		finished: {
			type: Boolean,
			default: false
		},
		finishedText: {
			type: String,
			default: '没有更多了'
		},
		isTitle: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		src() {
			return `${this.$constant.imgUrl}empty/empty_${this.type}.png`
		}
	},
	data() {
		return {

		}
	}
}
</script>

<style lang="scss" scoped>
.app-empty {
  width: 100%;

  & .app-empty-center {
    width:auto;
    display: flex;
    justify-content: space-around;
    align-items:center;
    flex-wrap:wrap;
  }

  & .app-empty__img {
    width: 100%;
    margin:158px 20px 78px;
    & image {
      width: 500px;
      max-width: 100%;
    }
  }

  & .app-empty__title {
    display: flex;
    align-items: center;
    font-size: 32px;
    color: #666666;

    & span  {
      font-weight: 400;

      & + span {
        font-weight: initial;
        margin-top: 10px;
        font-size: 26px;
      }
    }
    & .empty_noData {
      font-size: 26px;
    }
  }
}
.foot-divider {
  height: 1px;
  background-color: #dcdada;
  width: 63px;
  margin: 0 22px;
}

.foot-text {
  font-size:24px;
  color: #a1a1a1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.foot-layout {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 115px;
}

.loading {
  display: inline-block;
  margin-right: 12px;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  background: 0 0;
  border-radius: 50%;
  border: 2px solid #e9eaec;
  border-color: #e9eaec #e9eaec #e9eaec #f4a738;
  animation: btn-spin 0.6s linear;
  animation-iteration-count: infinite;
}

@keyframes btn-spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
